<template>
    <div class="main">
        <input class="dis-b search" type="number" placeholder="请输入需要查询的id" v-model="id"/>
        <button class="dis-b btn" @click="search">搜索</button>
        <dl>
            <dt>绑定的钻石代理信息：</dt>
            <dd>
                <template v-if="myData.gemid == 0">
                    <div>暂未绑定</div>
                </template>
                <template v-else>
                    <div>
                        <img :src="myData.gemUrl" alt="">
                    </div>
                    <div>
                        {{myData.gemid}}
                    </div>
                    <div>
                        {{myData.gemname}}
                    </div>
                </template>
            </dd>
            <dt>绑定的金币代理信息：</dt>
            <dd>
                <template v-if="myData.goldid == 0">
                    <div>暂未绑定</div>
                </template>
                <template v-else>
                    <div>
                        <img :src="myData.goldUrl" alt="">
                    </div>
                    <div>
                        {{myData.goldid}}
                    </div>
                    <div>
                        {{myData.goldname}}
                    </div>
                </template>
            </dd>
        </dl>
        <no-data v-if="noData"></no-data>
        <toast v-model="toast" type="text" :time="1000" is-show-mask :text="text" position="default"></toast>
    </div>
</template>

<script>
    import util from "../../fetch/util";
    import {XTable} from 'vux'

    export default {
        name: "bindInfo",
        components: {
            XTable,
        },
        data: function () {
            return {
                noData: false,
                toast: false,
                id: '',
                text: '',
                myData: {
                    goldid: 0,
                    gemid: 0
                },
            }
        },
        methods: {
            getData(id) {
                let params = {
                    id: id
                };
                util.fetchGet(util.path.queryBind, params).then((data) => {
                    if (data.code === 0) {
                        this.myData = data.data;
                    } else {
                        console.log(data);
                    }
                    this.id = '';
                })
            },
            search() {
                this.getData(this.id);
            }
        },
        mounted: function () {
            let userInfo = JSON.parse(localStorage.getItem('userInfo'));
            //this.getData(userInfo.id);
        }
    }
</script>

<style scoped>

    .search {
        width: 100%;
        line-height: 40px;
        box-sizing: border-box;
        padding-left: 15px;
    }

    .btn {
        width: 100%;
        line-height: 34px;
        margin-bottom: 15px;
        background: #00ADDE;
        color: #fff;
    }

    img {
        width: 60px;
        height: 60px;
    }

    dl {
        background: #fff;
    }

    dt {
        border-bottom: #eee 1px solid;
        line-height: 30px;
        padding-left: 15px;
    }

    dd {
        text-align: center;
        padding: 10px 0;
        border-bottom: #eee 1px solid;
    }

    dd > div {
        display: inline-block;
        width: 30%;
        vertical-align: middle;
    }
</style>
